<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    width="35%"
    append-to-body
  >
    <div id="layoutContent">
      <el-form ref="form" :model="pageForm" :rules="rules" label-position="right" label-width="150px">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="pageForm.username" :readonly="flag" />
        </el-form-item>
        <el-form-item v-if="title==='新增'" label="密码：">
          <el-input value="1234qwer" readonly />
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="pageForm.name" />
        </el-form-item>
        <el-form-item label="角色：" prop="role">
          <el-select v-model="pageForm.role" multiple placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item._id"
              :label="item.roleName"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitClick">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      flag: false,
      title: '新增',
      value: '',
      pageForm: {
        alarmState: 1,
        hasReport: 1
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (this.title === '新增') {
              this.$get('/login/longinUsername', { username: value }).then(res => {
                if (res.data.status === 1) {
                  callback()
                } else {
                  callback(new Error(res.data.message))
                }
              })
            } else {
              callback()
            }
          }, trigger: 'blur' }],
        role: [
          { required: true, message: '角色不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
        this.reset()
      }
    }
  },
  methods: {
    reset() {
      // 先清除校验，再清除表单，不然有奇怪的bug
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
      this.pageForm = {}
      this.flag = false
      this.title = '新增'
    },
    close() {
      this.$emit('close')
    },
    resourceFunction(val) {
      this.title = '编辑'
      this.flag = true
      this.pageForm = {
        ...val
      }
      this.pageForm.role = val.role.split(',')
    },
    submitClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.pageForm.password = '1234qwer'
            this.$post('/login/register', this.pageForm).then(res => {
              if (res.data.status === 1) {
                this.$message.success(res.data.message)
                this.isShow = false
              } else {
                this.$message.warning(res.data.message)
                this.isShow = false
              }
            })
          } else {
            this.$put('/user/update', this.pageForm).then(res => {
              if (res.data.status === 1) {
                this.$message.success(res.data.message)
                this.isShow = false
              } else {
                this.$message.warning(res.data.message)
                this.isShow = false
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped>
  .amap-page-container {
    position: relative;
  }
  .container {
    max-height: 600px;
    background-color: white;
    overflow: auto;
  }
  .amap-demo {
    height: 300px;
  }
</style>
